<template>
  <div>
    <CategorySelect :show="scene !== 0" @getCategoryId="getCategoryId" />
    <el-card>
      <!-- spu展示列表区域  scene = 0-->
      <div v-show="scene == 0">
        <el-button class="addspu" type="primary" icon="el-icon-plus" :disabled="!category3Id" @click="addSpu">添加SPU</el-button>
        <el-table style="width: 100%" border :data="records">
          <el-table-column type="index" label="序号" align="center" width="80" />
          <el-table-column prop="spuName" label="SPU名称" align="center" />
          <el-table-column prop="description" label="SPU描述" align="center" />
          <el-table-column label="操作" align="center">
            <template slot-scope="{ row }">
              <Hint-button type="success" size="mini" icon="el-icon-plus" title="添加sku" @click="addSku(row)" />
              <Hint-button type="warning" size="mini" icon="el-icon-edit" title="修改sku" @click="updateSpu(row)" />
              <Hint-button type="info" size="mini" icon="el-icon-info" title="查看sku列表" @click="selectSpuList(row)" />
              <el-popconfirm title="这是一段内容确定删除吗？" @onConfirm="deletespu(row)">
                <Hint-button slot="reference" type="danger" size="mini" icon="el-icon-delete" title="删除sku" />
              </el-popconfirm>
            </template>
          </el-table-column>
        </el-table>
        <el-pagination :page-sizes="[1, 5, 10]" :total="total" :current-page="page" :page-size="limit" layout="prev,pager,next,jumper,->,sizes,total" @current-change="getSpuList" @size-change="sizeChange" />
      </div>
      <!-- spu 修改 | 新增 区域  scene = 1-->
      <div><spuForm v-show="scene == 1" ref="spu" @changeScene="changeScene" /></div>
      <!-- sku 新增区域  scene = 2-->
      <div><skuForm v-show="scene == 2" ref="sku" @changescene="changescene" /></div>
    </el-card>
    <el-dialog :title="`${sku.spuName} 的sku列表`" :visible.sync="dialogTableVisible" :before-close="close">
      <el-table v-loading="loading" element-loading-text="拼命加载中" element-loading-spinner="el-icon-loading" element-loading-background="rgba(0, 0, 0, 0.8)" :data="spuList">
        <el-table-column label="名称" prop="skuName" />
        <el-table-column label="价格" prop="price" />
        <el-table-column label="重量" prop="weight" />
        <el-table-column label="默认图片">
          <template slot-scope="{ row }">
            <img :src="row.skuDefaultImg" style="width: 100px" />
          </template>
        </el-table-column>
      </el-table>
    </el-dialog>
  </div>
</template>

<script>
import spuForm from '@/views/product/spu/spuForm/spuForm'
import skuForm from '@/views/product/spu/skuForm/skuForm'
export default {
  name: 'Spu',
  components: {
    spuForm,
    skuForm,
  },
  data() {
    return {
      // 1级分类id
      category1Id: '',
      // 2级分类id
      category2Id: '',
      // 3级分类id
      category3Id: '',
      // 请求第1页的数据
      page: 1,
      // 一页请求3条
      limit: 5,
      // 请求成功存储的spu数组
      records: [],
      // 剩余总页数
      total: 0,
      // 展示内容的变量(0:展示的列表,1:spu展示的spu表单,2:sku展示的sku表单)
      scene: 0,
      sku: {}, // 临时存储sku信息供查看sku列表使用
      dialogTableVisible: false,
      spuList: [],
      // loading的控制变量
      loading: true,
    }
  },
  methods: {
    // 接收子组件自定义事件的回调函数
    getCategoryId({ id, level }) {
      // 解构出分类id,level是用来区分哪级的
      // console.log(id, level)
      switch (level) {
        case 1:
          // 赋值
          this.category1Id = id
          // 每次赋值后都清除掉上次的残留数据
          this.category2Id = ''
          this.category3Id = ''
          break
        case 2:
          this.category2Id = id
          this.category3Id = ''
          break
        case 3:
          this.category3Id = id
          // 整理完成所有3级分类后开始获取spu列表的数据
          this.getSpuList()
          break
      }
    },
    // 获取spu列表的数据
    async getSpuList(pages = 1) {
      this.page = pages
      const { page, limit, category3Id } = this
      console.log(page, 'page')
      const res = await this.$api.spu.reqGetSpuList(page, limit, category3Id)
      // console.log(res)
      if (res.code === 200) {
        this.records = res.data.records
        this.total = res.data.total
      }
    },
    // 页码值发生变化时触发的回调(插件内置了参数,封装了点击当前页的页码,这个函数可以省)
    currentChange(page) {
      // console.log(page, 'currentChange')
      // 获取最新的页码值
      // this.page = page
      // 再次发送请求(可以再次利用pages默认值赋值套路,但是可读性没那么高)
      // this.getSpuList(page)
    },
    // 每页显示的条数发生变化时触发的回调(这个函数不能省)
    sizeChange(limit) {
      // 套路同上
      this.limit = limit
      this.getSpuList()
    },
    // 点击展示列表修改按钮时的回调(点击修改某一个spu)
    updateSpu(row) {
      this.scene = 1
      // 获取子组件的实例,并且触发子组件身上的方法发送请求
      this.$refs.spu.initSpuData(row)
    },
    // 点击添加SPU按钮时的回调
    addSpu() {
      this.scene = 1
      this.$refs.spu.addSpuData(this.category3Id)
    },
    // 子组件的自定义事件(子组件点击取消时触发的事件)
    changeScene({ scene, flag }) {
      // console.log(e)
      // 转换面板为展示数据面板
      this.scene = scene
      if (flag === '修改') {
        // 修改数据成功,重新发送请求,请求当前页this.page的数据,而不是直接回第一页
        this.getSpuList(this.page)
      } else {
        // 新增情况下默认去回第一页
        this.getSpuList()
      }
    },
    // 删除 spu
    async deletespu(row) {
      const res = await this.$api.spu.reqDeleteSpu(row.id)
      if (res.code === 200) {
        this.$message({ type: 'success', message: '删除ok' })
        this.getSpuList(this.records.length > 1 ? this.page : 1)
      }
    },
    // 添加 sku 信息
    addSku(row) {
      // console.log(row)
      // 切换为 sku 表格
      this.scene = 2
      // 父组件调用子组件的方法,让子组件发送 3 个请求
      this.$refs.sku.getData(row, this.category1Id, this.category2Id, this.category3Id)
    },
    // 取消自定义事件回调
    changescene(scene) {
      this.scene = scene
    },
    // 查看当前 spu 的所有 sku
    async selectSpuList(row) {
      // 临时存储对象供 Dialog 使用
      this.sku = row
      // 展示 Dialog 面板
      this.dialogTableVisible = true
      // 发请求 发当前 spu 的 sku 实例
      const res = await this.$api.sku.reqFindBySpuId(row.id)
      if (res.code === 200) {
        // 赋值然后供查看sku列表使用
        this.spuList = res.data
        this.loading = false
      }
    },
    // 关闭 Dialog 的回调
    close(done) {
      // 放行
      done()
      // 恢复 dialog 状态
      this.loading = true
      // 清空展示的数组
      this.spuList = []
    },
  },
}
</script>

<style scoped>
.el-pagination {
  text-align: center;
}
.addspu {
  margin-bottom: 20px;
}
</style>
